import React from 'react';
import { Layout } from 'antd';
import ComponentPanel from './components/ComponentPanel';
import Canvas from '../../features/canvas/Canvas';
import PropertyPanel from './components/PropertyPanel';

const { Sider, Content } = Layout;

/**
 * 设计器主页面
 * @returns 设计器组件
 */
const Editor: React.FC = () => {
  return (
    <Layout style={{ height: 'calc(100vh - 64px)' }}>
      {/* 左侧组件面板 */}
      <Sider width={280} style={{ background: '#fff', padding: '8px' }}>
        <ComponentPanel />
      </Sider>

      {/* 中间画布区域 */}
      <Content style={{ padding: '0 16px', position: 'relative' }}>
        <Canvas />
      </Content>

      {/* 右侧属性面板 */}
      <Sider width={320} style={{ background: '#fff', padding: '8px' }}>
        <PropertyPanel />
      </Sider>
    </Layout>
  );
};

export default Editor;
